<template>
	<view >
		<view>
			<view class="bg_1"></view>
			<view class="nav"  :style="{ top: 'calc(' + statusBarHeight + ' + 10rpx)' }">
				<view class="nav_mine">
					<view v-for="(item,index) in navList" :key="index"
						:class="'nav_item ' + (tabCurrentIndex == item.state ? 'on' : '')" >
						<text @click="tabClick(index)">{{ item.text}}</text>
					</view>
				</view>
			</view>
			<scroll-view :scroll-y="true" class="live_list" 
				:style="{ top: 'calc(92rpx + ' + statusBarHeight + ')' }">
				<swiper
				  :current="tabCurrentIndex"
				  class="swiper-box2"
				  duration="300"
				  @change="changeTab"
				  
				>
				  <swiper-item
				    class="tab-content"
				    v-for="(tabItem, tabIndex) in navList"
				    :key="tabIndex"
				  >
				    <scroll-view
				      class="list-scroll-content"
				      scroll-y
				      @scrolltolower="loadData"
				    >
				      <view
				        v-if="
				          tabItem.loadingState != 'first_loading' &&
				          tabItem.balanceList.length == 0
				        "
				        class="empty_part flex_column_start_center"
				      >
				        <text>'还没有数据哦～</text>
				      </view>
				      <!-- 余额列表 -->
				      <template>
				        <view class="log">
							<view
							   v-for="(item, index) in tabItem.balanceList"
							   :key="index"
							   class="log-item "
							   @click="navTos2(item)"
							 >
							      <image v-if="item.picture" :src="item.picture.split(',')[0]" class="log_image" mode="widthFix"></image>
								  <view v-else class="log_article">
									  <view>{{item.content}}</view>
								  </view>
								  <view  class="log-item-title" v-if="item.title" >{{item.title}}</view>
								  <view class="flex_row_between_end  log_desc">
									  <view class="flex_row_start_end">
										  <image :src="item.member.memberAvatar" mode="aspectFit" class="log_desc_image"></image>
										  <view>{{item.member.memberNickName}}</view>
									  </view>
									  <view class="flex_row_start_end">
										  <uni-icons type="hand-up" size="18" color="#8c8c8c"></uni-icons>
										  <view v-if="item.likeCount>0">{{item.likeCount}}</view>
									  </view>
								  </view>
								 
							 </view>
						</view>
				      </template>
				     <loadingState
				        v-if="
				          tabItem.loadingState == 'first_loading' ||
				          tabItem.balanceList.length > 0
				        "
				        :state="tabItem.loadingState"
				      />
				    </scroll-view>
				  </swiper-item>
				</swiper>
			</scroll-view>
			<!-- 按钮 -->
			<view class="index_add flex_row_center_center" @click="navTo2(tabCurrentIndex)">
				<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import loadingState from '@/components/loading-state.vue'
	import {mapState,mapMutations} from 'vuex'
	export default{
		components:{
			loadingState
		},
		data(){
			return{
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				//#ifdef MP
				menuButtonHeight: uni.getMenuButtonBoundingClientRect().height + 'px',
				menuButtonTop: uni.getMenuButtonBoundingClientRect().top + 'px',
				menuButtonleft: uni.getMenuButtonBoundingClientRect().left + 'px',
				//#endif
				primarycategorylist:[
					{catalogId:0,catalogName:'关注'},
					{catalogId:1,catalogName:'推荐'},
				],
				curLabelId:0,
				tabCurrentIndex:0,
				navList: [{
						state: 0,
						text: '推荐',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 1,
						text: '星座',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 2,
						text: '测试',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 3,
						text: '心理',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 4,
						text: '交友',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					
					
				],
			}
		},
		onLoad(){
			console.log(uni.getSystemInfoSync().statusBarHeight);
			this.loadData()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		methods:{
			goCurrent(e){
				console.log('e',e);
				let index = Number(e)-1;
				this.tabCurrentIndex=index;
				let navItem = this.navList.filter(item => item.state == index)[0];
				navItem.balanceList=[]
				navItem.loadingState = 'first_loading';
				this.loadData()
			}, 
			/* 获取列表数据 */
			loadData(source){
				console.log('111111111111');
				//将订单挂载到tab列表下,起到缓存的效果，避免多次请求
				let index = this.tabCurrentIndex;
				let navItem = this.navList.filter(item => item.state == index)[0];
				let state = navItem.state;
				
				if (source === 'tabChange' && navItem.loadingState !== 'first_loading') {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingState === 'loading') {
					//防止重复加载
					return;
				}
				
				if (navItem.loadingState == 'no_more_data') {
					//已经没有数据，无需再请求
					return;
				}
				let param = {};
				param.url = 'v3/discuss/front/list';
				param.data = {};
				param.data.postType = navItem.state+1;
				param.data.memberId = this.userCenterData.memberId;
				
				param.data.pageSize = 10;
				param.data.current = navItem.current;
				navItem.loadingState = navItem.loadingState == 'first_loading' ? navItem.loadingState : 'loading';
				param.data.state = navItem.state;
				
				this.$request(param).then(res => {
					console.log('resss',res);
					if (res.state == 200) {
						navItem.balanceList = navItem.balanceList.concat(res.data.list);
						let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (hasMore) {
							navItem.current++;
							navItem.loadingState = 'allow_loading_more';
						} else {
							navItem.loadingState = 'no_more_data';
						}
					} else {
						this.$modal.msg(res.msg);
					}
					// if (this.stopPullDownRefresh) {
					// 	this.stopPullDownRefresh = false;
					// 	uni.stopPullDownRefresh();
					// }
					console.log('navList',this.navList);
				}).catch((e) => {
					//异常处理
				})
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			tabClick(index){
				this.tabCurrentIndex=index
			},
			navTos2(item){
			    let url="/pages/index/reportdetail"
				const obj = {
					id:item.discussPostId
				}
				console.log('obj',obj);
				
				// 将对象参数转为JSON字符串，并使用encodeURIComponent编码
				const params = encodeURIComponent(JSON.stringify(obj));
				
				// 跳转页面并传递对象参数
				uni.navigateTo({
				   url: `${url}?params=${params}`
				});
			},
		}
	}
</script>

<style>
	page{
		background-color: #f9f9f9;
	}
</style>
<style  lang="scss" scoped>

	.bg_1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 90rpx;
		z-index: 0;
		right: 0;
		margin: 0 auto;
		background-color: #fff;
		
	}
	
	.nav {
		position: fixed;
		top: 80rpx;
		left: 0;
		width: 750rpx;
		height: 76rpx;
		// background-color: 'transpanrent';
		background-color: #fff;
		z-index: 99;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		z-index: 99;
		right: 0;
		margin: 0 auto;
	}
	.nav_mine {
		overflow-x: scroll;
		box-sizing: border-box;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		/* padding-bottom: 25px; */
		border-bottom: 4rpx solid #e5e5e5;
	}
	
	.nav_mine::-webkit-scrollbar {
		display: none;
	}
	
	.nav_item {
		display: inline-block;
		line-height: 76rpx;
		text-align: center;
		color: #282828;
		font-size: 30rpx;
		padding: 0 25rpx;
		color: #656565;
		// background-color: #2cd8f4;
	}
	.nav_item.on text {
		display: inline-block;
		line-height: 76rpx;
		/* border-bottom: 4rpx solid #fff; */
		font-weight: 700;
		font-size: 34rpx;
		color: #000;
	}
	
	.live_list {
		width: 750rpx;
		/* #ifdef H5 */
		height: calc(100vh - 194rpx);
		/* #endif */
		/* #ifdef MP || APP-PLUS */
		height: calc(100vh - 168rpx);
		/* #endif */
	
	
		position: fixed;
		top: 180rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		padding-top: 0rpx;
	}
	.swiper-box2 {
	  height: 100%;
	}
	.list-scroll-content {
	  height: 100%;
	  background-color: #f9f9f9;
	}
	.log{
		column-count: 2;
		column-gap: 10px;
		padding: 22rpx;
	}
	.log-item {
		 width: 100%;
		 break-inside: avoid;
		 background-color: #fff;
		 margin-bottom: 16rpx;
	     border-radius: 20rpx;
	}
	.log_article{
		padding: 34rpx 22rpx;
		border-radius: 20rpx 20rpx 0 0;
		color: #7a70a6;
		
		background-image: linear-gradient(45deg,#f5f2fd,#ece9fe);
		& view{
			max-height: 156rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		}
		
	}
	.log_image{
		width:100%;
		border-radius: 20rpx 20rpx 0 0;
	}
	.log-item-title{
		 white-space: nowrap;   //不换行
		 overflow: hidden;       //超出部分隐藏
		 text-overflow: ellipsis;    //文本溢出显示省略号
		 font-size: 26rpx;
		 // margin: 8rpx 0;
		 padding: 10rpx 22rpx;
	}
		 
	.log_desc{
		color: #727272;
		padding: 10rpx 22rpx;
	}
	.log_desc_image{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	
	.empty_part {
	  padding-top: 160rpx;
	
	 
	
	  text {
	    color: #5e5e5e;
	    font-size: 26rpx;
	    margin-top: 57rpx;
	  }
	
	  
	}
	.index_add{
		background-color: #63dbf6;
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		right: 30rpx;
		bottom: 200rpx;
		border-radius: 50%;
		z-index: 99999;
		
	}
</style>